<template>
    <div class="limitList-wrapper">
        <div class="head-container">
            <div class="head-container-left">
                <img src="/img/user-head-img.png" alt="">
                <div>
                    <!-- <span class="user-name">哈哈哈</span> -->
                    <span v-if="state.role_name" class="user-role">{{ state.role_name }}</span>
                </div>
            </div>
            <div>
                <a-button @click="saveRoleGrant" type="primary" class="mr-8">确认</a-button>
                <a-button @click="cancelRoleGrant" type="primary" ghost>取消</a-button>
            </div>
        </div>
        <div class="tab-container tab-container-box">
            <a-tabs v-model:activeKey="state.activeKey" @change="changeTab(state.activeKey)" class="tab-container-box">
            <a-tab-pane  v-for="item in state.platformTypeList" :key="item.dict_code" :tab="item.dict_name">
            <div class="tab-container-tree">
                <!-- {{ treeDataKeys.checkedKeys }} -->
                <a-tree v-if="state.treeData.length" v-model:checkedKeys="treeDataKeys.checkedKeys" checkable
                    :tree-data="state.treeData" show-icon :defaultExpandAll="true" :blockNode="true" rowKey="id"
                    :fieldNames="{
                        children: 'childrenList',
                        title: 'name',
                        key: 'id',
                    }">
                </a-tree>
            </div>
            </a-tab-pane>
            </a-tabs>
        </div>
    </div>
</template>

<script setup>
import { message } from "ant-design-vue";
import { onMounted, reactive, ref,defineEmits,defineExpose } from 'vue'
import { sysRoleDetail, sysRoleUpdateResource } from '@/service/api'
import { sysResourceQueryAllActive, sysResourceQueryTree } from '@/service/api'
// import { DownOutlined } from '@ant-design/icons-vue';
// import LimitTree from "./limitTree.vue";
// import tabPane from "./tabPane.vue";
import { useRouter } from 'vue-router';

// const arrayUniq = require('array-uniq');

const router = useRouter();
const emit = defineEmits(['close'])
const state = reactive({
    // treeHeight:200,
    role_name: '',  // 角色名称
    role_id: '',  // 用户id
    activeKey: '1',
    treeData: [],
    // platformTypeList: [],   //系统类型

    // 按钮权限id对照表 type 1目录 2菜单 3按钮
    // id : {parentPosi}
    menu3Obj: {}
})

const treeDataKeys = reactive({})
// let treeRefs = [];
onMounted(() => {
    // state.role_name = router.currentRoute.value.query.name + '';
    // state.role_id = router.currentRoute.value.query.roleId + '';



    // state.treeHeight = document.getElementsByClassName('tab-container-box')[0].offsetHeight-50
})
const loadEditData = (data) => {
    state.role_name = data.name + '';
    state.role_id = data.roleId + '';
    // 获取全量的菜单
    getTreeForGrant()
}

//获取用户的菜单权限树
const getTreeForGrant = () => {
    sysResourceQueryTree({
        //    "isActive": true,
    }).then(res => {
        if (res.result) {

            state.treeData = res.result;

            getOwnPower();
        }
    })
}


//获取角色拥有的权限
const getOwnPower = () => {

    sysRoleDetail({ id: state.role_id }).then(res => {
        if (res.status == "000_0000_0000") {
            treeDataKeys.checkedKeys = res.result.resourceList ? res.result.resourceList.map(i => i.id) : [];
        }
    })
}


// 角色权限保存
const saveRoleGrant = () => {

    let params = {
        roleId: state.role_id,
        resourceIdList: treeDataKeys.checkedKeys
    }
    sysRoleUpdateResource(params).then(res => {
        if (res.status == "000_0000_0000") {
            // state.role_name = res.data.name
            message.success("保存成功")
        }
    })

}

// 点击取消
const cancelRoleGrant = () => {

    // router.push({ path: '/thermalSafety/roleList' });
    emit('close')
}


// tab切换
const changeTab = (activeKey) => {
    // state.activeKey = activeKey
    // state.treeData = []
    // state.expandedKeys = []
    // state.selectedKeys = []
    // state.checkedKeys = []
    // getTreeForGrant()
    state.treeHeight = document.getElementsByClassName('tab-container-box')[0].offsetHeight - 50
}
defineExpose({
    loadEditData
})
</script>

<style lang="less" scoped>
.head-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;

    .head-container-left {
        display: flex;
        align-items: center;

        img {
            margin-right: 24px;
        }

        .user-name {
            margin-right: 8px;
            font-size: 18px;
        }

        .user-role {
            display: inline-block;
            background: #24C38E;
            padding: 3px 6px;
            border-radius: 3px;
        }
    }

    .JManage-btn-primary {
        width: 80px;
        text-align: center;
        padding: 0;
        background: #006EFF;
        border-radius: 6px;
    }

    .JManage-btn-background-ghost {
        background: #11206F;
        border: 1px solid #164283;
        color: #fff;
    }
}

.limitList-wrapper {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tab-container {
    padding-top: 32px;
    height: 100%;
    overflow: hidden;
}

.tab-container-box {
    height: 100%;
    overflow-y: auto;
}

// .tab-container-tree{
//     overflow-y:auto ;
// }
:deep(.JManage-tabs-content-holder) {
    overflow-y: auto;

    // 滚动条
    &::-webkit-scrollbar-track {
        /*外层轨道*/
        border: none;
        background: transparent;
    }

    &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 8px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 2px;
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        background-color: #1A3183;
        border-radius: 4px;
    }
}

.mr-8 {
    margin-right: 8px;
}
</style>
